<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type="text/css">
    .timeDown{width: 150px;  
        height: 30px;  
        background-color: #ff3000;  
        border: 0;  
        border-radius: 15px;  
        color: #fff; 
    } 
    .timeDown.on {  
            background-color: #eee;  
            color: #ccc;  
            cursor: not-allowed; 
    }
    </style>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <title>倒计时</title>
</head>

<body>
    <input type="button" value="获取验证码" class="timeDown"> 
   
    <script>
    //倒计时
    $(".timeDown").click(btnCheck); 
	function btnCheck() {   
		$(this).addClass("on");   
		var time = 59;   
		$(this).attr("disabled", true);   
		var timer = setInterval(function() {    
			if (time == 0) {     
				clearInterval(timer);     
				$(".timeDown").attr("disabled", false);     
				$(".timeDown").val("获取验证码");     
				$(".timeDown").removeClass("on");    
			} else {     
				$('.timeDown').val(time + "秒");     
				time--;    
			}   
		}, 1000);  
	} 
    </script>
</body>

</html>